<template>
  <div class="app-container">
    <el-steps :active="active" align-center>
      <el-step title="编辑课程基本信息" />
      <el-step title="编辑课程大纲" />
      <el-step title="课程最终发布" />
    </el-steps>
    <el-button type="primary" @click="add">添加章节</el-button>
    <!-- 章节 -->
    <el-card v-for="chapter in chapters" :key="chapter.id">
      <div slot="header">
        <span>{{ chapter.title }}</span>
        <div style="float: right;display: inline-block">
          <el-button style="padding: 3px 0" type="text" @click="addVideo(chapter)">添加小节</el-button>
          <el-button style="padding: 3px 0" type="text" @click="edit(chapter.id)">修改</el-button>
          <el-button style="padding: 3px 0" type="text" @click="del(chapter.id)">删除</el-button>
        </div>
      </div>
      <div v-for="videoItem in chapter.videoVOList" :key="videoItem.id">
        <span>{{ videoItem.title }}</span>
        <div style="float: right;display: inline-block">
          <el-button style="padding-left: 3px" type="text" @click="editVideo(videoItem.id, chapter)">修改</el-button>
          <el-button style="padding-left: 3px" type="text" @click="delVideo(videoItem.id)">删除</el-button>
        </div>
      </div>
    </el-card>
    <div>
      <el-button style="margin-top: 12px" @click="prev">上一步</el-button>
      <el-button style="margin-top: 12px" @click="next">下一步</el-button>
    </div>
    <!--添加章节 弹窗-->
    <el-dialog title="添加章节" :visible.sync="chapterDialogFormVisible" @close="chapterDialogFormCancel">
      <el-form :model="chapterDialogForm">
        <el-form-item label="章节名称">
          <el-input v-model="chapterDialogForm.title" autocomplete="off" />
        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model="chapterDialogForm.sort" type="number" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="chapterDialogFormCancel">取 消</el-button>
        <el-button type="primary" @click="chapterDialogFormSaveOrUpdate">确 定</el-button>
      </div>
    </el-dialog>
    <!--添加小节 弹窗-->
    <el-dialog :title="`${videoDialogForm.chapterTitleStatus}小节 - ${videoDialogForm.chapterTitle}`" :visible.sync="videoDialogFormVisible" @close="videoDialogFormCancel">
      <el-form :model="videoDialogForm">
        <el-form-item label="小节名称">
          <el-input v-model="videoDialogForm.title" autocomplete="off" />
        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model="videoDialogForm.sort" type="number" />
        </el-form-item>
        <el-form-item label="是否可以试听">
          <el-radio-group v-model="videoDialogForm.isFree">
            <el-radio label="false">收费</el-radio>
            <el-radio label="true">免费</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="上传视频">
          <el-upload :action="uploadAction"
                     :on-success="vodUploadSuccess"
                     :on-remove="vodRemove"
                     :before-remove="beforeVodRemove"
                     :on-exceed="vodExceed"
                     :file-list="fileList"
                     :limit="1"
          >
            <el-button size="small" type="primary">上传视频</el-button>
            <el-tooltip placement="right-end">
              <div slot="content">最大支持1GB，<br/>只能上传MP4文件</div>
              <i class="el-icon-question"></i>
            </el-tooltip>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="videoDialogFormCancel">取 消</el-button>
        <el-button type="primary" @click="videoDialogFormSaveOrUpdate">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import chapter from '@/api/edu/chapter'
import video from '@/api/edu/video'

export default {
  data() {
    return {
      // 章节
      chapterDialogForm: {
        title: '',
        sort: 0,
        id: ''
      },
      chapters: [],
      chapterDialogFormVisible: false,
      active: 1,
      courseId: '',
      // 小节
      videoDialogFormVisible: false,
      videoDialogForm: {
        id: '',
        title: '',
        sort: 0,
        courseId: '',
        chapterId: '',
        chapterTitle: '',
        videoSourceId:'',
        videoOriginalName: '',
        isFree: 'false',
        chapterTitleStatus: '新建',
      },
      uploadAction:
        process.env.VUE_APP_BASE_API + '/service_vod/vod/uploadVideo',
      fileList: []
    }
  },
  created() {
    this.courseId = this.$route.params.id
    this.getList()
  },
  methods: {
    reset() {
      // 章节
      this.chapterDialogForm.sort = 0
      this.chapterDialogForm.title = ''
      // 小节
      this.videoDialogForm.id = ''
      this.videoDialogForm.title = ''
      this.videoDialogForm.sort = 0
      this.videoDialogForm.courseId = ''
      this.videoDialogForm.chapterId = ''
      this.videoDialogForm.chapterTitle = ''
      this.videoDialogForm.isFree = 'false'
      this.videoDialogForm.videoSourceId = ''
      this.videoDialogForm.videoOriginalName = ''
      this.videoDialogForm.chapterTitleStatus = '新建'
      this.fileList = []
    },
    // 获取章节列表
    getList() {
      chapter.getList(this.courseId).then(res => {
        this.chapters = res.data.result
      })
    },
    // 添加章节
    add() {
      this.chapterDialogFormVisible = true
    },
    // 修改章节
    edit(id) {
      chapter.getChapter(id).then(res => {
        this.chapterDialogForm.sort = res.data.result.sort
        this.chapterDialogForm.title = res.data.result.title
        this.chapterDialogForm.id = res.data.result.id
        this.chapterDialogFormVisible = true
      })
    },
    // 删除章节
    del(id) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        chapter.deleteChapter(id).then(res => {
          this.$message.success('删除成功')
          this.getList()
        })
      }).catch(() => {

      })
    },
    // 取消章节弹窗
    chapterDialogFormCancel() {
      this.chapterDialogFormVisible = false
      this.reset()
    },
    // 保存章节弹窗
    chapterDialogFormSaveOrUpdate() {
      const oneChapter = this.chapterDialogForm
      if (oneChapter.id) {
        chapter.updateChapter(oneChapter).then(res => {
          this.reset()
          this.getList()
          this.chapterDialogFormVisible = false
          this.$message.success('修改成功')
        })
      } else {
        oneChapter.courseId = this.courseId
        chapter.addChapter(oneChapter).then(res => {
          this.reset()
          this.getList()
          this.chapterDialogFormVisible = false
          this.$message.success('保存成功')
        })
      }
    },
    // 添加小节按钮
    addVideo(oneChapter) {
      this.videoDialogForm.courseId = oneChapter.courseId
      this.videoDialogForm.chapterId = oneChapter.id
      this.videoDialogForm.chapterTitle = oneChapter.title
      this.videoDialogFormVisible = true
    },
    // 关闭添加小节窗口
    videoDialogFormCancel() {
      this.videoDialogFormVisible = false
      this.reset()
    },
    // 保存小节
    saveVideo() {
      video.addVideo(this.videoDialogForm).then(res => {
        this.$message.success('添加成功')
        this.getList()
        this.videoDialogFormVisible = false
        this.reset()
      })
    },
    // 更新小节
    updateVideo() {
      video.updateVideo(this.videoDialogForm.id, this.videoDialogForm).then(res => {
        this.$message.success("更新成功")
        this.getList()
        this.videoDialogFormVisible = false
        this.reset()
      })
    },
    // 更新/新建
    videoDialogFormSaveOrUpdate() {
      if (this.videoDialogForm.id) {
        this.updateVideo()
      } else {
        this.saveVideo()
      }
    },
    // 更新小节按钮
    editVideo(id, oneChapter) {
      // 获取小节信息
      video.getVideo(id).then(res => {
        const videoItem = res.data.result
        for (const key in videoItem) {
          this.videoDialogForm[key] = videoItem[key] + ''
        }
        this.videoDialogForm.chapterTitle = oneChapter.title
        this.videoDialogFormVisible = true
        this.videoDialogForm.chapterTitleStatus = '修改'
      })
    },
    // 删除小节
    delVideo(id) {
      this.$confirm('确认要删除该小节？', '提示', {
        type: 'info'
      }).then(() => {
        video.delVideo(id).then(() => {
          this.$message.success('删除成功')
          this.getList()
        })
      }).catch(() => {

      })
    },
    prev() {
      this.$router.push({ path: `/course/course/${this.courseId}` })
    },
    next() {
      this.$router.push({ path: `/course/publish/${this.courseId}` })
    },
    // 上传成功回调
    vodUploadSuccess(response, file, fileList) {
      this.videoDialogForm.videoSourceId = response.data.videoId
      this.videoDialogForm.videoOriginalName = response.data.originalName
    },
    // 删除上传成功的视频
    vodRemove(file, fileList) {
      video.delVideo(this.videoDialogForm.videoSourceId).then(() => {
        this.$message.success("删除成功")
      })
    },
    // 删除上传视频之前
    beforeVodRemove(file, fileList) {
      return this.$confirm(`确定删除 ${ file.name }？`);
    },
    vodExceed() {
      this.$message.warning("只能上传一个视频")
    }
  }
}

</script>
